import React, { useState, useEffect } from 'react'
import axios from '../../utils/index'
import "./Money.css"
import { Down, MoreO, } from '@react-vant/icons'
import { BillOutline, HandPayCircleOutline } from 'antd-mobile-icons'
import { Space } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import { Button, Tag } from 'antd-mobile'

export default function Money() {
  const navigate = useNavigate()
  const user = JSON.parse(localStorage.getItem("user"))
  const [data, setData] = useState([])
  const [data1, setData1] = useState([])
  const [num, setNum] = useState(5)

  const getOnes = async () => {
    let list = await axios.get(`/getOne?id=${user._id}`)
    if (list.code === 200) {
      setData(list.list)
      localStorage.setItem("users", JSON.stringify(list.list))
    }
  }

  const getWater = async () => {
    let list = await axios.get(`/getWater?id=${user._id}&&pagesize=${num}`)
    if (list.code === 200) {
      setData1(list.list.reverse())
    }
  }

  const times = (time) => {
    const date = new Date(time);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    let hours = date.getHours();
    const minutes = date.getMinutes().toString().padStart(2, '0');
    
    // 判定是上午还是下午
    const period = hours < 12 ? '上午' : '下午';
    
    // 将24小时制转换为12小时制
    if (period === '下午' && hours > 12) {
      hours -= 12;
    }
    // 特别处理中午12点，不需要转换
    if (hours === 0) {
      hours = 12;
    }
  
    const formattedHours = hours.toString().padStart(2, '0');
    const formattedTime = `${year}年${month}月${day}日 ${period}${formattedHours}:${minutes}`;
    return formattedTime;
  }

  useEffect(() => {
    getWater()
  }, [num])

  useEffect(() => {
    getOnes()
    getWater()
  }, [])

  return (
    <div>
      <div className="mao">
        <div className="top">
          <div className="return">
            <span className="icon">
              <Space gap={20}>
                <Down className="leftIcon" onClick={() => { navigate("/cart", { state: { text: addText } }) }} />
              </Space>
            </span>
            <span className="top-cart">电子钱包</span>
          </div>
          <div className="returns">
            <span>
              <Space gap={20}>
                <MoreO onClick={() => { }} style={{ fontSize: "25px", marginTop: "20px" }} />
              </Space>
            </span>
          </div>
        </div>
        <div className="bankCards">
          <div className="bankCards-left">
            <p className="bankCards-p1">{data.username}</p>
            <p className="bankCards-p2">您的余额</p>
            <p className="bankCards-p3">¥<span className="s-money">{Number(data.wallet).toFixed(2)}</span></p>
          </div>
          <div className="bankCards-right">
            <p className="bankCards-p4">VISA</p>
            <Button className="bankCards-button" onClick={() => { navigate("/recharge") }}>充值</Button>
          </div>
          <div className="black"></div>
        </div>
        <div className="bankCards-center">
          <span className="bankCards-span1">交易记录</span>
          <span className="bankCards-span2" onClick={() => { setNum("") }}>查看全部</span>
        </div>
      </div>
      <div className="Recording">
        {
          data1.map(item => {
            return <div key={item._id} className="details">
              <div className="details-img">
                {
                  item.text == "充值" ? <BillOutline /> : <HandPayCircleOutline />
                }
              </div>
              <div className="details-text">
                <p className="details-p1">{item.name}</p>
                <p className="details-p2">{
                  times(item.time)
                }</p>
              </div>
              <div className="details-num">
                <p className="details-p3">{item.price}元</p>
                <p className="details-p4">{item.text}
                  <Tag color='success' style={{ fontSize: "8px", marginBottom: "2vh" }} className={item.text == "充值" ? "" : "show"}>↑</Tag>
                  <Tag color='danger' style={{ fontSize: "8px", marginBottom: "2vh" }} className={item.text == "打车" ? "" : "show"}>↓</Tag>
                </p>
              </div>
            </div>
          })
        }
        <div className="div"></div>
      </div>
    </div>
  )
}
